import React,{Component} from 'react'
import {connect} from 'react-redux'
import {
    LoginContainer,
    LoginTitle,
    LoginMidContainer,
    LoginTips,
    LoginBtn
} from './LoginStyle'
import cookie from '../../../utils/cookie'
import {Toast} from 'antd-mobile'
import HomeCommon from 'pages/home/HomeCommon'

class Login extends Component {
   
    login=()=>{
      
        const username = this.user.value;
        const password = this.password.value;  
        const ls_user = cookie.get('user');
        // console.log(JSON.parse(ls_user)[0].username)
        if(ls_user){
          
            const f = JSON.parse(ls_user).some(item=>{
                if(item.username === username) return true 
            })
            if(f){
                const flag = JSON.parse(ls_user).some(item=>{
                    if(item.password ===password&&item.username===username) return true
                })
                if(flag){
                    
                    //  alert(JSON.parse(ls_user)[0].username+'登录成功')
                     Toast.success(JSON.parse(ls_user)[0].username+'登录成功！', 1);
                    this.props.history.push('/home')
                    document.location.reload();
                }else{
                   
                    Toast.fail('密码或用户名错误，请重新输入', 2);
                }
            }else{
               
                Toast.fail('请再次确认用户名是否正确', 2);
            }
        }else{
           Toast.offline('用户名不存在,请注册',2)
            this.props.history.push('/mine/register')
        }
    }

    componentDidMount () {
        this.props.change_title('登录')
    }
    render(){
        return(
            <LoginContainer>
                <LoginTitle>
                    <span>-----</span><em>使用账号登录</em><span>-----</span>
                </LoginTitle>
                < LoginMidContainer>
                    <input type="text" placeholder="请输入您的用户名" ref={ el=>this.user =el } /><br/>
                    <input type="password" placeholder="请输入密码" 
                    ref = { el=>this.password = el}/>
                </LoginMidContainer>
                <LoginTips>
                    <span>使用聚美账号登录</span><em>30天内自动登录</em>
                </LoginTips>
                <LoginBtn onClick = {this.login}>登录</LoginBtn>
                
            </LoginContainer>
        )
    }
}

export default HomeCommon(Login)